import React, { useRef } from "react";

import { Hue } from "./Hue";
import { Saturation } from "./Saturation";
import { Alpha } from "./Alpha";

import { ColorModel, ColorPickerBaseProps, AnyColor } from "../HexColorPickerTypes";
import { useColorManipulation } from "../hooks/useColorManipulation";
import { formatClassName } from "../utils/format";
import { View } from "@tarojs/components";

interface Props<T extends AnyColor> extends Partial<ColorPickerBaseProps<T>> {
    colorModel: ColorModel<T>;
}

export const AlphaColorPicker = <T extends AnyColor>({
    className,
    colorModel,
    color = colorModel.defaultColor,
    onChange,
    ...rest
}: Props<T>) => {
    const [hsva, updateHsva] = useColorManipulation<T>(colorModel, color, onChange);

    const nodeClassName = formatClassName(["react-colorful", className]);

    return (
        <View {...rest} className={nodeClassName}>
            <Saturation hsva={hsva} onChange={updateHsva} />
            <Hue hue={hsva.h} onChange={updateHsva} />
            <Alpha hsva={hsva} onChange={updateHsva} className="react-colorful__last-control" />
        </View>
    );
};
